<template>
	<view class="mineWrapper">
		
		<view class="topWrapper">
			<image class="beijing" src="../../static/wodebeijing.jpg" :style="{height:bgHeight}"></image>
			<view class="infoWrapper" :style="{top:infoTop}">
				<image class="avatar" :src="avatar"></image>
				<view class="username">{{username}}</view>
				<!-- <view class="username">{{phone}}</view> -->
			</view>
			
		</view> 
		<view class="listWrapper">
			<view v-for="item in dataList" class="item" v-on:click="bindItem(item.key)">
				<image mode="aspectFit" class="item-icon" :src="item.icon"></image>
				<view class="item-title">{{item.title}}</view>
				<image mode="aspectFit" class="item-arrow" src="../../static/xiangyou.png"></image>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<image class="back" mode="aspectFit" src="../../static/baifanhuii.png" v-on:click="bindBack()" :style="{top:navHeight}"></image>
		<!-- #endif -->
	</view>
</template>

<script>
	import common from '../../common/common.js';
	import http from '../../common/http.js';
	export default {
		data() {
			return {
				"navHeight":"0px",
				"infoTop":"0px",
				"bgHeight":"100px",
				"avatar":"",
				"username":"",
				"phone":"",
				dataList:[
					{"title":"消费明细", "key":"consume", "icon":"../../static/xiaofeijilu.png"},
					// {"title":"调款详情", "key":"tiaokuan", "icon":"../../static/diaokuanxiangqing.png"},
					{"title":"联系客服", "key":"kefu", "icon":"../../static/lianxikefuli.png"},
					// {"title":"意见反馈", "key":"feedback", "icon":"../../static/yijianhuikui.png"},
				]
			}
		},
		onLoad (options) {
			
			var self = this;
			var systemInfo = common.getSystemInfo()
			var bgHeight = systemInfo.windowWidth*0.675
			this.bgHeight = (bgHeight.toFixed(2))+"px"
			this.navHeight = systemInfo.titleBarHeight+"px"
			this.infoTop = (systemInfo.titleBarHeight+systemInfo.statusBarHeight+10)+'px'
			this.phone = uni.getStorageSync("phone")
			common.getUserInfo((res)=>{
				self.avatar = res.avatarUrl
				self.username = res.nickName
			})
		},
		methods: {
			bindBack() {
				uni.navigateBack({
					
				})
			},
			bindItem (key){
				console.log(key)
				if (key == "kefu") {
					common.showKefu()
				}
				if (key == "consume") {
					wx.navigateTo({
						url:"../consume/consume"
					})
				}
				if (key == "tiaokuan") {
					wx.navigateTo({
						url:"../tiaokuan/tiaokuan"
					})
				}
				if (key == "feedback") {
					wx.navigateTo({
						url:"../feedback/feedback"
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}
	.beijing {
		height: 100px;
		width: 100%;
	}
	.topWrapper {
		position: relative;
		overflow: hidden;
		margin-bottom: 6px;
	}
	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		background-color: #F4F5F6;
		margin-bottom: 10px;
	}
	.username {
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: white;
		top: 70px;
	}
	.item {
		height: 50px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		background-color: white;
	}
	.item-icon {
		width: 20px;
		height: 20px;
		margin-right: 10px;
		margin-left: 15px;
	}
	.item-title {
		color: #222222;
		font-size: 16px;
	}
	.btnWrapper {
		width: 100%;
		height: 50px;
		padding: 10px 30px;
		box-sizing: border-box;
		text-align: center;
		line-height: 50px;
	}
	.fanhui {
		background-color: red;
		font-size: 18px;
		font-weight: bold;
		color: white;
		border-radius: 25px;
	}
	.item-arrow {
		opacity: 0.6;
		width: 15px;
		height: 15px;
		right: 15px;
		position: absolute;
	}
	.back {
		width: 20px;
		height: 20px;
		position: absolute;
		left: 15px;
	}
	.infoWrapper {
		position: absolute;
		display: flex;
		flex-direction: column;
		color: white;
		width: 200px;
		left: 50%;
		margin-left: -100px;
		justify-content: center;
		align-items: center;
	}
	
</style>
